let renderList=()=>{
    axios.get('/students').then(res=>{
        console.log(res.data.data);
        let str=''
        res.data.data.forEach(item => {
            str+=`
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
                </td>
            </tr>
            `
        })
        document.querySelector('tbody').innerHTML=str
    })
}
renderList()
document.querySelector('tbody').addEventListener('click',function(e){
    if(e.target.classList.contains('bi-trash')){
        let id=e.target.dataset.id
        axios.delete('/students/'+id).then(result=>
            renderList()
        )
    }
    if(e.target.classList.contains('bi-pen')){
        document.querySelector('h5.modal-title').innerHTML='修改学员'
        document.querySelector('h5.modal-title').setAttribute('data-id',e.target.dataset.id)
        axios.get(`/students/${e.target.dataset.id}`).then(result => {
            let data = result.data.data
            // console.log(data)
            // 处理省市县(省默认就是有的；只需要处理市和县)
            axios.get(`/api/city`, { params: { pname: data.province } }).then(result => {
              // console.log(result.data.data)
              let cities = result.data.data
              let str = '<option value="">--城市--</option>'
              cities.forEach(item => (str += `<option value="${item}">${item}</option>`))
              cs.innerHTML = str
        
              // 获取市之后，再获取县
              axios
                .get(`/api/area`, { params: { pname: data.province, cname: data.city } })
                .then(result => {
                  // console.log(result.data.data)
                  let areas = result.data.data
                  let str = '<option value="">--地区--</option>'
                  areas.forEach(item => (str += `<option value="${item}">${item}</option>`))
                  as.innerHTML = str
                  // 表示省、市、县都获取完毕了
                  val(document.querySelector('form'),data)
                })
            })
          })
          // 显示模态框
          modal.show()
    }
})
let modalBox = document.querySelector('#modal')
let modal = new bootstrap.Modal(modalBox)
document.querySelector('#openModal').addEventListener('click',function(){
    document.querySelector('form').reset()
    document.querySelector('h5.modal-title').innerHTML='添加学员'
    modal.show()
})
let ps = document.querySelector('[name=province]') // 省 下拉框
let cs = document.querySelector('[name=city]') // 市 下拉框
let as = document.querySelector('[name=area]') // 县 下拉框

const initCity = () => {
  // 完成省市县的联动效果
  // 1. 【马上获取省】
  axios.get('/api/province').then(result => {
    // console.log(result)
    let provinces = result.data.data
    // console.log(provinces)
    let str = '<option value="">--省份--</option>'
    provinces.forEach(item => (str += `<option value="${item}">${item}</option>`))
    ps.innerHTML = str
  })
  // 2. 【切换省的时候，获取市】
  ps.addEventListener('change', function () {
    // 重置县
    as.innerHTML = '<option value="">--地区--</option>'
    // 获取选择的省的名字  ps.value
    // console.log(ps.value)
    axios.get(`/api/city`, { params: { pname: ps.value } }).then(result => {
      // console.log(result.data.data)
      let cities = result.data.data
      let str = '<option value="">--城市--</option>'
      cities.forEach(item => (str += `<option value="${item}">${item}</option>`))
      cs.innerHTML = str
    })
  })
  // 3. 【切换市的时候，获取县】
  cs.addEventListener('change', function () {
    // 获取选择的省的名字  ps.value
    // console.log(ps.value)
    axios.get(`/api/area`, { params: { pname: ps.value, cname: cs.value } }).then(result => {
      // console.log(result.data.data)
      let areas = result.data.data
      let str = '<option value="">--地区--</option>'
      areas.forEach(item => (str += `<option value="${item}">${item}</option>`))
      as.innerHTML = str
    })
  })
}
initCity()
document.querySelector('#submit').addEventListener('click', function () {
    // 获取表单各项的值（用户名、年龄、组号、省市县等等）
    // let data = val(表单) // 使用这个插件方法，必须为每个表单项设置name属性
    let data = val(document.querySelector('#form'))
    // 根据接口要求，要求下面5个字段，必须是number类型
    data.age = +data.age
    data.gender = +data.gender
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    data.group = +data.group
    // console.log(data)
    // Ajax提交数据
    let title=document.querySelector('.modal-title')
    if(title.innerHTML==='添加学员'){
        axios.post('/students', data).then(result => {
            // console.log(result.data)
            // 添加成功，重新获取数据，重新渲染到页面
            renderList()
            // 隐藏模态框
            modal.hide()
          })
    }else if(title.innerHTML==='修改学员'){
        axios.put(`/students/${title.dataset.id}`,data).then(result=>{
            renderList()
            modal.hide()
        })
    }
    
  })
